<template>
    <el-container style="height: 950px; border: 1px solid #eee" class="enlarged-text">
        <el-aside width="350px">
            <el-container>
                <el-header style="padding: 0;margin: 0">
                    <el-row>
                        <el-input placeholder="请输入内容" v-model="inputPatient" style="width: 100%">
                            <template #prepend>
                                <span>患者名：</span>
                            </template>
                            <template #append>
                                <el-icon><Search /></el-icon>
                            </template>
                        </el-input>
                    </el-row>
                </el-header>
                <el-main style="height: 800px;padding: 0;margin: 0">
                    <el-tabs type="border-card">
                        <el-tab-pane label="医技检验">
                            <el-tag size="small">患者：</el-tag>
                            <el-table ref="singleTable" 
                                    :data="RegistersTable01" 
                                    highlight-current-row
                                    @row-click="handleCurrentChange01" 
                                    style="width: 100%; height: 50%" 
                                    :show-header="true"
                                    max-height="400" 
                                    size="small">
                                <el-table-column property="CaseNumber" label="病历号" width="80"></el-table-column>
                                <el-table-column property="RealName" label="姓名"></el-table-column>
                                <el-table-column property="Age" label="年龄" width="50"></el-table-column>
                                <el-table-column property="registerid" label="挂号ID"></el-table-column>  
                            </el-table>
                        </el-tab-pane>
                    </el-tabs>
                </el-main>
            </el-container>
        </el-aside>

        <el-container direction="vertical" style="height: 950px">
            <el-row>
                <span style="margin-left: 20px;" :span="20">{{ showPatientsTop }}</span>
                <el-button type="text" size="small" style="float: right;margin-right: 20px;" 
                    @click="endRegister" v-if="showStop" :span="2">诊毕</el-button>
            </el-row>

            <!-- 合并后的内容区域 -->
            <el-main style="width:100%;background:#fff;height:800px;overflow-y: auto;padding-top: 0;">
                <!-- 患者基本信息 -->
                <el-form ref="form" :model="medicalRecord01" label-width="120px" label-position="left" size="small">
                    <el-row style="background-color: #EAF1F5;">
                        <el-col :span="8" style="margin-top: 4px;">
                            <el-col :span="4">
                                <el-tag>
                                    患者信息:
                                </el-tag>
                            </el-col>
                        </el-col>
                        <el-col :span="4">
                            <el-button type="text" size="small" @click="stageCheck">执行确认</el-button>
                        </el-col>
                        <el-col :span="4">
                            <el-button type="text" size="small" @click="saveCheck">取消执行</el-button>
                        </el-col>
                        <el-col :span="4">
                            <el-button type="text" size="small" :disabled="isSaved" @click="cleanCheck">填写结果</el-button>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20" style="margin-top: 15px;">
                        <el-col :span="8">
                            <el-form-item label="病历号">
                                <el-input v-model="medicalRecord01.Readme" :disabled="isSaved"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="患者姓名">
                                <el-input v-model="medicalRecord01.Present" :disabled="isSaved"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="年龄">
                                <el-input v-model="medicalRecord01.PresentTreat" :disabled="isSaved"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="结算类别">
                                <el-input v-model="medicalRecord01.History" :disabled="isSaved"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="就诊科室">
                                <el-input v-model="medicalRecord01.Allergy" :disabled="isSaved"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="处方状态">
                                <el-input v-model="medicalRecord01.Physique" :disabled="isSaved"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="收费日期">
                                <el-input v-model="medicalRecord01.Diagnosis" :disabled="isSaved"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="开单医生">
                                <el-input v-model="medicalRecord01.Proposal" :disabled="isSaved"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="发票号">
                                <el-input v-model="medicalRecord01.Careful" :disabled="isSaved"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <!-- 检验信息表格区域 -->
                    <el-row style="background-color: #EAF1F5; margin-top: 20px;">
                        <el-col :span="24">
                            <el-tag>检验项目列表:</el-tag>
                        </el-col>
                    </el-row>

                    <el-row style="margin-top: 15px;">
                        <el-col :span="24">
                            <el-table :data="testItems" border style="width: 100%" size="small">
                                <el-table-column prop="testName" label="检验名称" width="150"></el-table-column>
                                <el-table-column prop="testPart" label="检验部位" width="120"></el-table-column>
                                <el-table-column prop="quantity" label="数量" width="80" align="center"></el-table-column>
                                <el-table-column prop="unit" label="单位" width="80" align="center"></el-table-column>
                                <el-table-column prop="unitPrice" label="单价(元)" width="100" align="right">
                                    <template #default="{row}">
                                        {{ row.unitPrice.toFixed(2) }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="totalAmount" label="总金额(元)" width="120" align="right">
                                    <template #default="{row}">
                                        {{ row.totalAmount.toFixed(2) }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="status" label="状态" width="120" align="center">
                                    <template #default="{row}">
                                        <el-tag :type="getStatusTagType(row.status)" size="small">
                                            {{ getStatusText(row.status) }}
                                        </el-tag>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-col>
                    </el-row>



                </el-form>
            </el-main>
        </el-container>
    </el-container>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Search } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from 'element-plus'

// 搜索相关
const inputPatient = ref('')

// 表格数据
const RegistersTable01 = ref([
    { CaseNumber: '20230001', RealName: '张三', Age: 35 },
    { CaseNumber: '20230002', RealName: '李四', Age: 42 },
    { CaseNumber: '20230003', RealName: '王五', Age: 28 }
])

// 表单数据
const medicalRecord01 = ref({
    Readme: '20230001',
    Present: '张三',
    PresentTreat: '35',
    History: '医保',
    Allergy: '内科',
    Physique: '待检验',
    Diagnosis: '2023-05-15',
    Proposal: '张医生',
    Careful: 'FP20230515001'
})

// 检验项目数据
const testItems = ref([
    { 
        id: 1,
        testName: '血常规检查', 
        testPart: '血液', 
        quantity: 1, 
        unit: '次', 
        unitPrice: 50.00, 
        totalAmount: 50.00,
        status: 'completed',
        result: '各项指标正常'
    },
    { 
        id: 2,
        testName: '肝功能检查', 
        testPart: '肝脏', 
        quantity: 1, 
        unit: '项', 
        unitPrice: 120.00, 
        totalAmount: 120.00,
        status: 'processing',
        result: '检测中...'
    },
    { 
        id: 3,
        testName: '心电图检查', 
        testPart: '心脏', 
        quantity: 1, 
        unit: '次', 
        unitPrice: 80.00, 
        totalAmount: 80.00,
        status: 'pending',
        result: ''
    }
])

// 当前选择的检验结果
const currentTestResult = ref('')
const currentTestItem = ref(null)

// 状态控制
const showPatientsTop = ref("请选择患者")
const showStop = ref(true)
const isSaved = ref(false)

// 方法定义
const handleCurrentChange01 = (row) => {
    showPatientsTop.value = `当前患者：${row.RealName} (病历号：${row.CaseNumber})`
    // 加载患者信息
    medicalRecord01.value.Readme = row.CaseNumber
    medicalRecord01.value.Present = row.RealName
    medicalRecord01.value.PresentTreat = row.Age
    // 模拟加载检验项目
    loadTestItems(row.CaseNumber)
}

const loadTestItems = (caseNumber) => {
    // 这里应该是从API加载检验项目
    console.log(`加载病历号 ${caseNumber} 的检验项目`)
    // 模拟API请求
    setTimeout(() => {
        ElMessage.success(`已加载 ${testItems.value.length} 个检验项目`)
    }, 500)
}

const endRegister = () => {
    console.log('诊毕操作')
    ElMessage.success('诊毕操作成功')
}

const stageCheck = () => {
    console.log('执行确认')
    ElMessage.info('执行确认操作')
}

const saveCheck = () => {
    console.log('取消执行')
    ElMessage.warning('已取消执行')
}

const cleanCheck = () => {
    console.log('填写结果')
    isSaved.value = false
    ElMessage.info('请填写检验结果')
}

// 检验相关方法
const getStatusTagType = (status) => {
    switch(status) {
        case 'completed': return 'success'
        case 'processing': return 'warning'
        case 'pending': return 'info'
        default: return ''
    }
}

const getStatusText = (status) => {
    switch(status) {
        case 'completed': return '已完成'
        case 'processing': return '进行中'
        case 'pending': return '待处理'
        default: return status
    }
}

// const filteredUndiagnosedPatients = computed(() => {
//     return allPatients.value
//         .filter(p => p.Visitstate == 3)  // 使用 == 而不是 === 以防数据类型不一致
//         .filter(p => inputPatient.value ? p.RealName.includes(inputPatient.value) : true)
      
// })


const viewTestDetail = (item) => {
    currentTestItem.value = item
    currentTestResult.value = item.result
    ElMessageBox.alert(item.result || '暂无结果', `检验项目详情: ${item.testName}`, {
        confirmButtonText: '确定'
    })
}

const editTestItem = (item) => {
    currentTestItem.value = item
    currentTestResult.value = item.result
    ElMessage.info(`准备编辑: ${item.testName}`)
}

const saveTestResult = () => {
    if (!currentTestItem.value) {
        ElMessage.warning('请先选择要保存的检验项目')
        return
    }
    
    currentTestItem.value.result = currentTestResult.value
    if (currentTestResult.value) {
        currentTestItem.value.status = 'completed'
    }
    
    ElMessage.success('检验结果已保存')
}

const submitAllTests = () => {
    ElMessageBox.confirm('确定要提交所有检验项目吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        testItems.value.forEach(item => {
            if (item.status === 'pending' && item.result) {
                item.status = 'completed'
            }
        })
        ElMessage.success('所有检验项目已提交')
    })
}

const printTestReport = () => {
    ElMessage.info('打印功能将在实际环境中实现')
    // 这里可以调用浏览器的打印功能
    // window.print()
}

//获取患者信息
const loadPatientData = async () => {
    //获取病历号
    const res = await service.get('/register/getAll')
    const casenumber = res.data
    const realname = res.data
    const registerid = await service.get(`/medicalrecord/getBycasenumber?casenumber=${casenumber}`)
    const invoicenum= await service.get(`/invoice/getByregisterid?registerid=${registerid}`)
    const medicalid= await service.get(`/herbalprescription/getByregisterid?registerid=${registerid}`)


}

// 初始化加载
onMounted(() => {





    // 模拟初始加载
    loadTestItems('20230001')
})
</script>

<style scoped>
/* 基础字体放大 */
.enlarged-text {
    font-size: 1.2em;
}

/* 调整表单标签宽度 */
.el-form-item {
    margin-bottom: 18px;
}

.el-form-item :deep(.el-form-item__label) {
    font-size: 1.1em;
}

/* 标题样式 */
.form-title {
    font-size: 1.3em;
    font-weight: bold;
    color: #333;
    margin: 10px 0;
}

/* 调整输入框内部文字大小 */
.el-input :deep(.el-input__inner) {
    font-size: 1em;
    height: 32px;
    line-height: 32px;
}

/* 按钮文字大小 */
.el-button {
    font-size: 1em;
    margin: 0 10px;
}

/* 表格文字大小 */
.el-table {
    font-size: 1.1em;
}

/* 标签页文字大小 */
.el-tabs :deep(.el-tabs__item) {
    font-size: 1.1em;
}

/* 标签文字大小 */
.el-tag {
    font-size: 1em;
}

/* 数字输入框调整 */
.el-input-number {
    width: 100%;
}

/* 下拉选择框调整 */
.el-select {
    width: 100%;
}

/* 文本域调整 */
.el-textarea :deep(.el-textarea__inner) {
    font-size: 1em;
    min-height: 100px;
}

/* 合并区域样式调整 */
.el-main {
    padding: 10px;
}

/* 表格操作按钮样式 */
.table-actions {
    display: flex;
    justify-content: space-around;
}
</style>